<template>
  <div class="rt-container" @click="handleClick">
    <div class="rt-table">
      <div class="tr">
        <div class="td" />
        <div v-for="(col, index) in table.columns" :key="index" class="td">
          {{ col.label }}
        </div>
      </div>
      <div v-if="!multiple" class="tbody">
        <template v-if="generate">
          <el-radio-group
            v-for="(row, rowIndex) in dataValue.rows"
            :key="row.id"
            v-model="dataValue.rows[rowIndex].text"
            @change="handleChange(row)"
          >
            <div class="tr">
              <div class="td">
                {{ row.label }}
              </div>
              <div v-for="(col, index) in row.cols" :key="index" class="td">
                <el-popover
                  v-if="col.canInput"
                  trigger="manual"
                  v-model="dataValue.rows[rowIndex].cols[index].visible"
                  placement="top-start"
                >
                  <el-input
                    v-model="col.columnInput"
                    placeholder="请说明原因"
                    @blur="handleColumnInput(row, col)"
                  ></el-input>
                  <el-radio :label="col.label" slot="reference" @input="singleRadio(row, col)">
                    {{ '' }}
                  </el-radio>
                </el-popover>
                <el-radio :label="col.label" v-else>
                  {{ '' }}
                </el-radio>
              </div>
            </div>
          </el-radio-group>
        </template>
        <el-radio-group
          v-for="row in table.rows"
          :key="row.id"
          v-model="dataValue[row.id]"
          @change="handleChange"
          v-else
        >
          <div class="tr">
            <div class="td">
              {{ row.label }}
            </div>
            <div v-for="(col, index) in table.columns" :key="index" class="td">
              <el-radio :label="col.label">
                {{ '' }}
              </el-radio>
            </div>
          </div>
        </el-radio-group>
      </div>
      <div v-else class="tbody">
        <el-checkbox-group v-for="row in table.rows" :key="row.id" v-model="dataValue[row.id]" @change="handleChange">
          <div class="tr">
            <div class="td">
              {{ row.label }}
            </div>
            <div v-for="col in table.columns" :key="col.id" class="td">
              <el-checkbox :label="col.label">
                {{ '' }}
              </el-checkbox>
            </div>
          </div>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from '../mixin'

export default {
  name: 'MatrixSelect',
  mixins: [mixin],
  props: {
    table: {
      type: Object,
      default: () => {}
    },
    multiple: {
      type: Boolean,
      default: false
    },
    generate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 矩阵单选默认数据结构 {"1":"选项1","2":"选项1","3":"选项1","1636537741435":"选项1"}
      // 矩阵多选默认数据结构 {"1":["选项1","选项2","选项3"],"2":["选项1","选项2","选项3"],"3":["选项1","选项2","选项3"]}
      dataValue: {}
    }
  },
  watch: {
    table: {
      handler(value) {
        this.initValue()
      },
      deep: true
    },
    multiple: {
      handler(value) {
        this.initValue()
      }
    }
  },
  created() {
    this.initValue()
    console.log('matrix-select PC端组件被创建了')
    console.log('generate', this.generate)
  },
  methods: {
    // 初始化矩阵value为二维数组
    initValue() {
      console.log(this.value)
      let initValue = {}
      // 如果为多选
      if (this.multiple) {
        this.table.rows.forEach((row, index) => {
          if (this.value[row.id]) {
            initValue[row.id] = this.value[row.id]
          } else {
            initValue[row.id] = new Array()
          }
        })
      } else {
        if (this.value.rows) {
          initValue = this.value
        } else {
          initValue = this.table
        }
      }
      this.dataValue = initValue
      // console.log(this.dataValue)
    },
    handleChange(r) {
      if (this.generate) {
        for (let c of r.cols) {
          if (c.label === r.text) {
            c.visible = true
          } else {
            c.visible = false
          }
        }
      }
      this.value = this.dataValue
      this.table.rows = this.value.rows
      this.$emit('change', this.value)
    },
    handleClick() {
      this.dataValue.rows.forEach((row) => {
        row.cols.forEach((col) => {
          col.visible = false
        })
      })
    },
    handleColumnInput(row, col) {
      col.visible = false
      for (let r of this.dataValue.rows) {
        if (r.id === row.id) {
          r.colInput = col.columnInput
        }
      }
      this.value = this.dataValue
      this.$emit('change', this.value)
    },
    singleRadio(row, col) {
      console.log(row, col)
    }
  }
}
</script>

<style lang="scss" scoped>
.rt-container {
  padding: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;

  .rt-table {
    border-radius: 8px;
    width: 100%;
    min-width: 600px;
    font-size: 14px;
    color: #606266;
    background-color: #fff;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border: 1px solid #ebeef5;
    border-right: none;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    overflow-x: auto;

    .tbody {
      display: flex;
      flex-direction: column;
    }

    .tr {
      vertical-align: inherit;
      border-color: inherit;
      -webkit-box-flex: 1;
      flex: 1 0 auto;
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: row;
      -webkit-box-align: stretch;
      align-items: stretch;
    }

    .td {
      flex: 50 0 auto;
      width: 50px;
      padding: 12px 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      overflow-wrap: break-word;
      position: relative;
      border-bottom: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;
      text-align: center;
      vertical-align: middle !important;
      font-size: 14px !important;

      .el-radio {
        justify-content: center;
      }
    }
  }
}
</style>
